<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    /**
     * watchEffect 侦听器，偏向于effect
     */
    const app = Vue.createApp({
        setup(){
            const {reactive, watchEffect, watchEffecttoRefs,toRefs} = Vue;
            const nameObj = reactive({name: 'dell',englishName:'lee'});
            /**
             * 立即执行，没有惰性，immediate
             * 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
             * 不能获取之前数据的值
             * 调用一次监听器就会失灵
             */
            const stop = watchEffect(()=>{
                console.log(nameObj.name)
                setTimeout(()=>{
                    stop();
                },5000)
            })
            const {name,englishName} = toRefs(nameObj)
            return {name,englishName}
        },
        template: `
          <div>
          <div>
            Name: <input v-model="name">
          </div>
          <div>
            Name is {{ name }}
          </div>

          <div>
            englishName: <input v-model="englishName">
          </div>
          <div>
            englishName is {{ englishName }}
          </div>
          </div>
        `
    });
    const vm = app.mount("#app");
</script>
</body>
</html>